<div id="layout" class="layout">
    <div class="layout-logo">
        layout-logo
    </div>
    <div class="layout-header">
        layout-header
    </div>
    <div class="layout-left">
        layout-left
    </div>
    <div class="layout-right">
        <div class="layout-main">
            layout-main<br/>
            layout-main<br/>
            layout-main<br/>
            layout-main<br/>
            layout-main<br/>
            layout-main<br/>
            <div class="layout-main-test">
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
                layout-main<br/>
            </div>
        </div>
    </div>
</div>
<div class="setting">
    <button id="fexedHeaderButton" onclick="toggleFexedHeader()">开启固定头部</button><br>
    <button id="fexedNavButton" onclick="toggleFexedNav()">开启固定左导航栏</button><br>
    <button id="leftNavButton" onclick="toggleLeftNav()">开启左导航栏</button><br>
    <button id="testDataButton" onclick="toggleTestData()">开启测试数据</button><br>
</div>

<script>
    let settingFexedHeader = false;
    let settingfexedNav = false;
    let settingLeftNav = false;
    let settingTestData = false;

    function toggleFexedHeader () {
        const title = "固定头部";
        const className = "layout-fixed-header";
        const buttonId = "fexedHeaderButton";
        if (settingFexedHeader) {
            document.getElementById("layout").classList.remove(className);
            document.getElementById(buttonId).innerHTML = `开启${title}`;
        } else {
            document.getElementById("layout").classList.add(className);
            document.getElementById(buttonId).innerHTML = `关闭${title}`;
        }
        settingFexedHeader = !settingFexedHeader;
    }

    function toggleFexedNav () {
        const title = "固定左导航栏";
        const className = "layout-fixed-nav";
        const buttonId = "fexedNavButton";
        if (settingfexedNav) {
            document.getElementById("layout").classList.remove(className);
            document.getElementById(buttonId).innerHTML = `开启${title}`;
        } else {
            document.getElementById("layout").classList.add(className);
            document.getElementById(buttonId).innerHTML = `关闭${title}`;
        }
        settingfexedNav = !settingfexedNav;
    }

    function toggleLeftNav () {
        const title = "左导航栏";
        const className = "layout-show-left";
        const buttonId = "leftNavButton";
        if (settingLeftNav) {
            document.getElementById("layout").classList.remove(className);
            document.getElementById(buttonId).innerHTML = `开启${title}`;
        } else {
            document.getElementById("layout").classList.add(className);
            document.getElementById(buttonId).innerHTML = `关闭${title}`;
        }
        settingLeftNav = !settingLeftNav;
    }

    function toggleTestData () {
        const title = "测试数据";
        const className = "layout-test";
        const buttonId = "testDataButton";
        if (settingTestData) {
            document.getElementById("layout").classList.remove(className);
            document.getElementById(buttonId).innerHTML = `开启${title}`;
        } else {
            document.getElementById("layout").classList.add(className);
            document.getElementById(buttonId).innerHTML = `关闭${title}`;
        }
        settingTestData = !settingTestData;
    }

    toggleFexedHeader();
    toggleFexedNav();
    toggleLeftNav();
    toggleTestData();
</script>

<style>
    body {
        margin: 0;
    }

    .layout {
        position: relative;
        padding-top: 120px;
        padding-left: 0;
        transition: padding-left .2s ease-out;
    }

    .layout-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 278px;
        height: 120px;
        background-color: #ffffff;
        z-index: 501;
    }

    .layout-header {
        position: absolute;
        top: 0;
        left: 278px;
        right: 0;
        height: 120px;
        background-color: #ffffff;
        z-index: 500;
    }

    .layout-header::before {
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        width: 200px;
        background-image: linear-gradient(to right, #f9f8f7, #ffffff);
        z-index: -1;
    }

    .layout-left {
        visibility: hidden;
        position: absolute;
        top: 120px;
        left: 0;
        width: 278px;
        bottom: 0;
        margin-left: -278px;
        z-index: 500;
        transition: margin-left .2s ease-out, visibility .2S;
    }

    .layout-left::before {
        content: "";
        position: absolute;
        top: 0;
        height: 100px;
        width: 100%;
        background-image: linear-gradient(to bottom, #f9f9f9, #ffffff);
        z-index: -1;
    }

    .layout-right {
        display: flex;
        padding: 30px;
        min-height: calc(100% - 180px);
        background-color: #f6f6f7;
    }

    .layout-right::before {
        content: "";
        position: absolute;
        top: 120px;
        left: 0;
        right: 0;
        height: 10px;
        background-image: linear-gradient(to bottom, #aaaaaa, #f6f6f7);
        opacity: .2;
    }

    .layout-main {
        flex: 1;
        background-color: #ffffff;
    }

    .layout-fixed-header .layout-logo,
    .layout-show-left.layout-fixed-nav .layout-logo,
    .layout-fixed-header .layout-header,
    .layout-fixed-nav .layout-left {
        position: fixed;
    }

    .layout-show-left {
        padding-left: 278px;
    }

    .layout-show-left .layout-left {
        visibility: visible;
        margin-left: 0;
    }

    .layout-show-left .layout-right::before {
        left: 278px;
    }

    .layout-fixed-header .layout-right::before {
        position: fixed;
    }

    .layout-fixed-header .layout-left::before {
        position: fixed;
        width: 278px;
        top: 120px;
    }

    .layout-main-test {
        display: none;
    }

    .layout-test .layout-main-test {
        display: block;
    }

    .setting {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
</style>